{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Login</title>

    <!-- CSS only -->
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/fas-all.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/tram.css' %}">

    <!-- JS, Popper.js, and jQuery -->
    <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
    <script src="{% static 'js/popper.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <link rel="icon" href="{% static 'img/favicon-32x32.png' %}">
</head>

<body>
    <header class="navbar  navbar-fixed-top navbar-expand-md">
        <nav class="container-xxl d-flex justify-content-between">
            <a class="navbar-brand pt-0 pb-0" href="/">
                <h1>
                    <img src="{% static 'img/me_300x300.jpeg' %}" alt="TRAM - Threat Report ATT&amp;CK Mapper">
                    TRAM
                </h1>
            </a>
        </nav>
    </header>
    <style>
        .form-signin {
            width: 100%;
            max-width: 330px;
            padding: 15px;
            margin: auto;
        }
    </style>

    <main class="form-signin" align="center">
        <form method="POST">
            {% csrf_token %}
            <label for="id_username" class="visually-hidden">Username</label>
            <input type="text" name="username" id="id_username" class="form-control" placeholder="Username" required
                autofocus>
            <label for="id_password" class="visually-hidden">Password</label>
            <input type="password" name="password" id="id_password" class="form-control" placeholder="Password"
                required>
            <hr>
            <button class="w-100 btn btn-lg btn-primary" type="submit">Sign In</button>
        </form>
        <button class="btn btn-sm" data-toggle="modal" data-target="#loginHelpModal">Login Help</button>
    </main>
    <div id="loginHelpModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Login Help</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <ol>
                        <li>TBD</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
